<template>
    <div class="table">
        <div class="container">
            <div class="handle-box">
                <el-form ref="form" label-width="100px">
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="数据库类型">
                                <el-select placeholder="请选择数据库类型" style="width: 90%" v-model="form.dbType"
                                           clearable>
                                    <el-option v-for="item in dics.dbType" :key="item.dict_code"
                                               :label="item.dict_name"
                                               :value="item.dict_code"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="数据库名">
                                <el-input v-model="form.dbName" placeholder="请输入数据库名" class="handle-input mr10"
                                          style="width: 90%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="数据库地址">
                                <el-input v-model="form.dbHost" placeholder="请输入数据库地址" class="handle-input mr10"
                                          style="width: 90%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-button type="primary" icon="el-icon-search" @click="search" style="width: 90%">
                                查询
                            </el-button>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="数据库环境">
                                <el-select placeholder="请选择数据库环境" style="width: 90%" v-model="form.dbEnv"
                                           clearable>
                                    <el-option v-for="item in dics.dbEnv" :key="item.dict_code"
                                               :label="item.dict_name"
                                               :value="item.dict_code"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="数据库端口">
                                <el-input v-model="form.dbPort" placeholder="请输入数据库端口" class="handle-input mr10"
                                          style="width: 90%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="7">
                            <el-form-item label="数据库用户">
                                <el-input v-model="form.dbUser" placeholder="请输入数据库用户" class="handle-input mr10"
                                          style="width: 90%"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-button type="primary" icon="el-icon-refresh" @click="refresh" style="width: 90%">
                                刷新
                            </el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div class="handle-box" style="margin-bottom:20px;">
                <el-button type="primary" icon="el-icon-lx-add" @click="add">添加</el-button>
                <el-button type="primary" icon="el-icon-edit" @click="edit">编辑</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="del">删除</el-button>
                <el-button type="primary" icon="el-icon-lx-searchlist" @click="check">查看详情</el-button>
            </div>
            <ces-table ref="cestable" :that='that'
                       size='small'
                       :tableHeight='tableHeight'
                       :stripe="true"
                       :isIndex='true'
                       :isHandle='true'
                       :isSelection='false'
                       :radioSelection='true'
                       :isPagination='true'
                       :tableData='tableData'
                       :tableCols='tableCols'
                       :tablePage='pagination'
                       @handleSelectionChange='handleSelectionChange'
                       @handleCurrentChange='handleCurrentChange'
                       @handleSizeChange="handleSizeChange">
            </ces-table>
            <!--添加 编辑 查看-->
            <cesEdit :visible="editView.visible" :data="editView.data"
                     :titleName="editView.titleName"></cesEdit>
        </div>
    </div>
</template>

<script>
    import cesTable from '@cores/commons/main/Table'
    import cesEdit from './edit'

    export default {
        name: "",
        components: {
            cesTable,
            cesEdit,
        },
        provide() {
            return {
                refresh: this.refresh,
            }
        },
        data() {
            return {
                that: this,
                tableHeight: window.innerHeight - 415,
                url_page: '/little-base-generator/generator/db/selectDb',
                url_del: '/little-base-generator/generator/db/deleteDb',
                url_con: '/little-base-generator/generator/db/ConTest',
                multipleSelection: [],
                // 表头及字段
                tableCols: [
                    {label: '数据库类型', align: 'center', render: (h, params) => this.renderDict(h, params, 'dbType')},
                    {label: '数据库环境', align: 'center', render: (h, params) => this.renderDict(h, params, 'dbEnv')},
                    {label: '数据库名', align: 'center', prop: 'dbName'},
                    {label: '数据库地址', align: 'center', prop: 'dbHost'},
                    {label: '数据库端口', align: 'center', prop: 'dbPort'},
                    {label: '数据库用户', align: 'center', prop: 'dbUser'},
                    {
                        label: "有效标志", align: 'center',
                        render: (h, params) => this.renderDict(h, params, 'dbStatus'),
                    },
                    {
                        label: '操作', fixed: 'right', type: 'Button', align: 'center',
                        btnList: [
                            {
                                type: 'text',
                                label: '连接测试',
                                icon: 'el-icon-lx-favor',
                                disabled: (row) => row.dbStatus == '0' ? true : false,
                                handle: (row, that) => this.conTest(row, that)
                            },
                        ]
                    },
                ],
                tableData: [],//表格数据
                pagination: {
                    pageSize: 10, pageNum: 1, total: 0
                },
                form: {
                    page: '1',//第几页
                    limit: '10',//每页条数，默认10条
                    dbType: '', dbName: '', dbHost: '',
                    dbEnv: '', dbPort: '', dbUser: '',
                },
                dics: {},
                editView: {
                    titleName: '', visible: false, data: {optTyle: '', dics: {}}
                },
            }
        },
        created() {
            this.initDict();//加载字典
            this.getPages();//查询数据
        },
        methods: {
            //变更分页条数
            handleSizeChange(val) {
                this.form.limit = val;
                this.getPages();//根据用户获取的每页显示页面数量显示页面
            },
            //变更上一页下一页
            handleCurrentChange(val) {
                this.form.page = val;
                this.getPages();
            },
            //选中table行
            handleSelectionChange(val) {
                this.$refs.cestable.clearSelect();
                this.multipleSelection = val;
            },
            /*初始化字典*/
            initDict() {
                this.dics.dbType = [
                    {dict_code: 'Oracle', dict_name: 'Oracle'},
                    {dict_code: 'MySql', dict_name: 'MySql'},
                ];
                this.dics.dbEnv = [
                    {dict_code: '开发', dict_name: '开发'},
                    {dict_code: '测试', dict_name: '测试'},
                    {dict_code: '正式', dict_name: '正式'},
                ];
                this.dics.dbStatus = [
                    {dict_code: '1', dict_name: '有效'},
                    {dict_code: '0', dict_name: '无效'},
                ];
            },
            // 获取分页数据
            getPages() {
                this.editView.visible = false;
                this.form.limit = this.pagination.pageSize;
                this.$post(this.url_page, this.form).then(res => {
                    if (res.data) {
                        this.tableData = res.data.list;
                        this.pagination.total = res.data.total;
                    } else {
                        this.$message({type: res.code, message: res.msg});
                    }
                })
            },
            //刷新
            refresh() {
                this.$refs.cestable.clearRadioSelection();
                this.multipleSelection = [];
                this.editView.data = [];
                this.pagination = {pageSize: 10, pageNum: 1, total: 10};
                this.form = {page: '1', limit: '10'};
                this.getPages();
            },
            /*查询*/
            search() {
                this.$refs.cestable.clearRadioSelection();
                this.multipleSelection = [];
                this.getPages();
            },
            /*添加*/
            add() {
                this.editView.data = {};
                this.editView.visible = true;
                this.editView.data.optTyle = 'add';
                this.editView.data.dics = this.dics;
                this.editView.titleName = '添加';
            },
            /*编辑*/
            edit() {
                let row = this.multipleSelection;
                if (row.length > 0) {
                    this.editView.data = row[0];
                    this.editView.visible = true;
                    this.editView.data.optTyle = 'edit';
                    this.editView.data.dics = this.dics;
                    this.editView.titleName = '编辑';
                } else {
                    this.$message({type: '', message: '请选中一条数据进行编辑'});
                }
            },
            /*删除*/
            del() {
                let row = this.multipleSelection;
                if (row.length > 0) {
                    this.$confirm('确定要删除数据吗？', '提示', {
                        confirmButtonText: '确定', cancleButtonText: '取消', type: 'warning'
                    }).then(() => {
                        this.$post(this.url_del, {dbId: row[0].dbId}).then(res => {
                            if ('success' === res.code) {
                                this.$message({type: res.code, message: res.msg});
                                this.refresh();
                            } else {
                                this.$message({type: res.code, message: res.msg});
                            }
                        })
                    }).catch(() => {
                        this.refresh();
                    });
                } else {
                    this.$message({type: '', message: '请选中一条数据进行删除'});
                }
            },
            /*查看详情*/
            check() {
                let row = this.multipleSelection;
                if (row.length > 0) {
                    this.editView.data = row[0];
                    this.editView.visible = true;
                    this.editView.data.optTyle = 'check';
                    this.editView.data.dics = this.dics;
                    this.editView.titleName = '查看详情';
                } else {
                    this.$message({type: '', message: '请选中一条数据进行查看详情'});
                }
            },
            /* 连接测试*/
            conTest(index, row) {
                delete row.dbAddDate;
                delete row.dbRevDate;
                this.$post(this.url_con, row).then(res => {
                    this.$message({type: res.code, message: res.msg});
                    this.refresh();
                })
            },
            /*渲染表格字典*/
            renderDict(h, params, field) {
                let text = params.row[field];
                this.dics[field].forEach((r) => {
                    if (r.dict_code === params.row[field]) {
                        text = r.dict_name;
                    }
                });
                let style = {};
                if (field == 'dbEnv') {
                    if (params.row.dbEnv === '开发') {
                        style.color = '#5cff19';
                    } else if (params.row.dbEnv === '测试') {
                        style.color = '#6cdbff';
                    } else if (params.row.dbEnv === '正式') {
                        style.color = '#ff0407';
                    }
                }
                if (field == 'dbStatus') {
                    if (params.row.dbStatus === '1') {
                        style.color = '#07ff38';
                    } else if (params.row.dbStatus === '0') {
                        style.color = '#ff0407';
                    }
                }
                return h('span', {style: style}, text);
            },
            /*渲染日期*/
            dateFormat(h, params, field) {
                return h('span', {}, params.row[field] ? this.dateFormatYMD(params.row[field]) : "");
            },
            dateFormatYMD(dat) {
                return this.$dateFormat(dat).format('YYYY-MM-DD');
            },
        },
    };
</script>

<style scoped>
    @import "../../../../assets/css/common.css";
</style>

